<template>
    <swiper class="icons">
        <swiper-slide v-for="(icons, index) of pages" :key="index">
           <div class="icon" v-for="item of icons" :key="item.id">
               <div class="icon-imgct">
                   <img class="icon-img" :src="item.imgUrl"/>
               </div>
               <p class="icon-title">{{item.desc}}</p>
           </div>
        </swiper-slide>
    </swiper>
</template>

<script>
    export default {
        props: {
            list: Array
        },
        computed: {
            pages() {
                var pages = [];
                var n=Math.ceil(this.list.length/8);
                for(var i=0; i<n; i++){
                    pages.push(this.list.slice(i*8, i*8+8))
                }
                return pages;
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .icons
        background-color: #efefef
        padding-bottom: 50%
        height: 0
        margin: .2rem 0
        .icon
            float: left
            width: 25%
            padding-bottom: 25%
            height: 0
            position: relative
            .icon-imgct
                padding-top: .16rem
                bottom: .4rem
                top: 0
                left: 0
                right: 0
                position: absolute
                .icon-img
                    height: 100%
                    margin: 0 auto
                    display: block
            .icon-title
                position: absolute
                width: 100%
                bottom: 0
                text-align: center
                color: $darkTextColor
                ellipsis()

</style>